<template>
    <div class="simple-map-picker">
        <!-- 搜索框 -->
        <!-- <el-input v-model="searchText" placeholder="请输入地址进行搜索" class="search-input" @keyup.enter.native="handleSearch">
            <el-button slot="append" icon="el-icon-search" @click="handleSearch"></el-button>
        </el-input> -->

        <!-- 地图容器 -->
        <div id="map-container" ref="mapContainer"></div>

        <!-- 选点结果 -->
        <div v-if="selectedPoint" class="result-box">
            <h4>选择的位置信息：</h4>
            <p>位置名称：{{ selectedPoint.name || '未知' }}</p>
            <p>经纬度：{{ selectedPoint.lng }}, {{ selectedPoint.lat }}</p>
            <p>详细地址：{{ selectedPoint.address || '未知' }}</p>
        </div>
    </div>
</template>

<script>
import AMapLoader from '@amap/amap-jsapi-loader'

export default {
    name: 'SimpleMapPicker',
    data() {
        return {
            map: null,
            marker: null,
            placeSearch: null, // 地点搜索服务
            searchText: '',
            selectedPoint: null
        }
    },
    mounted() {
        this.initMap()
    },
    methods: {
        async initMap() {
            try {
                // 加载高德地图JS API
                const AMap = await AMapLoader.load({
                    key: '559fcb3a8fc70c9be5201519b1eebd0d', // 替换为你的高德地图Key
                    version: '2.0',
                    plugins: ['AMap.PlaceSearch', 'AMap.Geocoder', 'AMap.Marker']
                })

                // 初始化地图
                this.map = new AMap.Map(this.$refs.mapContainer, {
                    zoom: 15, // 初始缩放级别
                    center: [104.06612800000005, 30.57292399999999] // 初始中心点（北京）
                })

                // 初始化地点搜索服务
                this.placeSearch = new AMap.PlaceSearch({
                    pageSize: 5,
                    pageIndex: 1,
                    city: '成都市'
                })

                // 初始化地理编码器
                this.geocoder = new AMap.Geocoder()

                // 绑定地图点击事件
                this.map.on('click', this.handleMapClick)

            } catch (error) {
                console.error('地图加载失败:', error)
                this.$message.error('地图加载失败，请稍后重试')
            }
        },


        // 移动到指定位置并添加标记
        moveToLocation(lnglat, name) {
            // 清除旧标记
            if (this.marker) {
                this.map.remove(this.marker)
            }

            // 创建新标记
            this.marker = new AMap.Marker({
                position: lnglat,
                map: this.map
            })

            // 移动地图中心
            this.map.setCenter(lnglat)

            // 获取地址详情
            this.getAddressInfo(lnglat, name)
        },

        // 地图点击事件处理
        handleMapClick(e) {
            this.moveToLocation([e.lnglat.getLng(), e.lnglat.getLat()], '点击选择的位置')
        },

        // 获取地址信息
        getAddressInfo(lnglat, name) {
            console.log(lnglat, name);
            this.$emit('point-selected', lnglat)
        }
    },
    beforeDestroy() {
        console.log('beforeDestroy');
        if (this.map) {
            
            this.map.destroy()
        }
    }
}
</script>

<style scoped>
.simple-map-picker {
    position: relative;
    width: 100%;
    height: 500px;
}

#map-container {
    width: 100%;
    height: 100%;
}

.search-input {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 300px;
    z-index: 10;
}

.result-box {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 4px;
    z-index: 10;
    max-width: 300px;
}

.result-box h4 {
    margin: 0 0 10px 0;
    color: #333;
}

.result-box p {
    margin: 5px 0;
    font-size: 14px;
    color: #666;
}
</style>